<template>
  <div class="user-display-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>用户管理中心</h1>
      <p class="page-description">集中管理系统用户、角色和权限，监控用户活动</p>
    </div>

    <!-- 统计概览卡片 -->
    <div class="stats-container">
      <el-card class="stat-card">
        <div class="stat-item">
          <div class="stat-value">{{ totalUsers }}</div>
          <div class="stat-label">总用户数</div>
          <div class="stat-trend">
            <span class="trend-up"><el-icon>
                <ArrowUp />
              </el-icon> 5.2%</span>
          </div>
        </div>
      </el-card>

      <el-card class="stat-card">
        <div class="stat-item">
          <div class="stat-value">{{ activeUsers }}</div>
          <div class="stat-label">活跃用户</div>
          <div class="stat-trend">
            <span class="trend-up"><el-icon>
                <ArrowUp />
              </el-icon> 2.8%</span>
          </div>
        </div>
      </el-card>

      <el-card class="stat-card">
        <div class="stat-item">
          <div class="stat-value">{{ newUsersToday }}</div>
          <div class="stat-label">今日新增</div>
          <div class="stat-trend">
            <span class="trend-down"><el-icon>
                <ArrowDown />
              </el-icon> 1.3%</span>
          </div>
        </div>
      </el-card>

      <el-card class="stat-card">
        <div class="stat-item">
          <div class="stat-value">{{ userRoles }}</div>
          <div class="stat-label">用户角色</div>
          <div class="stat-trend">
            <span class="trend-stable"><el-icon>
                <Minus />
              </el-icon> 0%</span>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 功能导航区域 -->
    <div class="features-container">
      <el-card class="feature-card" @click="navigateTo('list')">
        <div class="feature-icon"><el-icon style="font-size: 28px;">
            <User />
          </el-icon>
          <div class="feature-action"><el-icon>
              <ArrowRight />
            </el-icon></div>
        </div>
        <div class="feature-content">
          <h3>用户列表管理</h3>
          <p>查看、编辑和管理系统所有用户账号信息</p>
        </div>

      </el-card>

      <el-card class="feature-card" @click="router.push('/roles')">
        <div class="feature-icon"><el-icon style="font-size: 28px;">
            <UserFilled />
          </el-icon>
          <div class="feature-action"><el-icon>
              <ArrowRight />
            </el-icon></div>
        </div>
        <div class="feature-content">
          <h3>角色权限配置</h3>
          <p>创建和管理用户角色，分配细粒度权限</p>
        </div>

      </el-card>

      <el-card class="feature-card" @click="navigateTo('logs')">
        <div class="feature-icon"><el-icon style="font-size: 28px;">
            <Document />
          </el-icon>
          <div class="feature-action"><el-icon>
              <ArrowRight />
            </el-icon></div>
        </div>
        <div class="feature-content">
          <h3>用户活动日志</h3>
          <p>查看用户登录和操作记录，审计系统使用情况</p>
        </div>
      </el-card>
    </div>

    <!-- 最近活动区域 -->
    <div class="recent-activity">
      <el-card>
        <div class="card-header">
          <h2>最近用户活动</h2>
          <el-button link>查看全部</el-button>
        </div>
        <el-table :data="recentActivities" stripe class="activity-table">
          <el-table-column prop="user" label="用户" width="180" />
          <el-table-column prop="action" label="操作" width="220" />
          <el-table-column prop="time" label="时间" width="180" />
          <el-table-column prop="status" label="状态" width="120">
            <template #default="scope">
              <el-tag :type="scope.row.status === '成功' ? 'success' : 'danger'">{{ scope.row.status }}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { User, UserFilled, Document, ArrowUp, ArrowDown, Minus, ArrowRight } from '@element-plus/icons-vue';

const router = useRouter();

// 统计数据
const totalUsers = ref('1,284');
const activeUsers = ref('862');
const newUsersToday = ref('24');
const userRoles = ref('8');

// 最近活动数据
const recentActivities = ref([
  { user: '张三 (admin)', action: '登录系统', time: '今天 09:23', status: '成功' },
  { user: '李四 (editor)', action: '修改用户信息', time: '今天 08:45', status: '成功' },
  { user: '王五 (viewer)', action: '查看用户列表', time: '昨天 16:32', status: '成功' },
  { user: '赵六 (operator)', action: '删除用户账号', time: '昨天 14:18', status: '失败' },
  { user: '钱七 (admin)', action: '分配用户角色', time: '昨天 10:05', status: '成功' }
]);

// 导航到具体功能页面
function navigateTo(path) {
  router.push(`/users/${path}`);
}
</script>

<style scoped>
@import url('../styles/usermanage.css');
</style>